<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>3d滚动图</title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			body{
				  /*想看到整个立方的近大远小效果, 就给ul的父元素添加透视*/
				perspective: 500px;
			}
			ul{
				width: 200px;
				height: 200px;
				border: 1px solid red;
				box-sizing: border-box;
				margin: 100px auto;
				position: relative;
				transform: rotateY(0deg) rotateX(0deg);
				transform-style: preserve-3d;
				animation: sport 10s linear 0s infinite normal;
				
			}
			ul li{
			   list-style: none;
            width: 200px;
            height: 200px;
            font-size: 60px;
            text-align: center;
            line-height: 200px;
            position: absolute;
            left: 0;
            top: 0;
			}
			  
            /*
                  注意点:
                 只要父元素被拉伸了,子元素也会被拉伸
            */
                 ul li img{
				width: 200px;
				height: 200px;
			}
			ul li:nth-child(1){
            background-color: red;
            /*旋转90度 在z轴平移100px  水平放大两倍上下一倍*/
            transform: rotateX(90deg) translateZ(100px) scale(2, 1);
        }
    
           ul li:nth-child(2){
            background-color: green;
            transform: rotateX(180deg) translateZ(100px) scale(2, 1);
        }
        ul li:nth-child(3){
            background-color: blue;
            transform: rotateX(270deg) translateZ(100px) scale(2, 1);
        }
        ul li:nth-child(4){
            background-color: yellow;
            transform: rotateX(360deg) translateZ(100px) scale(2, 1);
        }
           ul li:nth-child(5){
            background-color: purple;
            transform: translateX(-200px) rotateY(90deg);
        }
        ul li:nth-child(6){
            background-color: pink;
            transform: translateX(200px) rotateY(90deg);
        }
        @keyframes sport{
        	from{transform: rotateX(0deg);}
        	to{transform: rotateX(360deg);}
        }
        
		</style>
	</head>
	<body>
		<ul>
		<li><img src="../img/banner4.jpg" alt=""></li>
         <li><img src="../img/ad3.jpg" alt=""></li>
         <li><img src="../img/ad5.jpg" alt=""></li>
         <li><img src="../img/banner3.jpg" alt=""></li>
    
			<li>5</li>
			<li>6</li>
		</ul>
	</body>
</html>
